<template>
  <el-form inline>
    <el-form-item label="用户名"  >
      <el-input v-model="search.username" placeholder="请输入搜索的用户名" clearable size="large" @change="searchChange"/>
    </el-form-item>
    <el-form-item label="用户电话号码" >
      <el-input v-model="search.phone" placeholder="请输入搜索的用户电话号码" clearable size="large" @change="searchChange"/>
    </el-form-item>
    <el-form-item label="用户昵称" >
      <el-input v-model="search.nickname" placeholder="请输入搜索的用户昵称" clearable size="large" @change="searchChange"/>
    </el-form-item>
<!--    <el-form-item label="性别">-->
<!--      <el-select-->
<!--          v-model="filters.gender"-->
<!--          placeholder="请选择性别"-->
<!--          size="large"-->
<!--          style="width: 240px"-->
<!--          @change="searchChange"-->
<!--      >-->
<!--        <el-option-->
<!--            label="男"-->
<!--            value="男"-->
<!--        />-->
<!--        <el-option-->
<!--            label="女"-->
<!--            value="女"-->
<!--        />-->
<!--      </el-select>-->
<!--    </el-form-item>-->

  </el-form>
  <el-table :data=" tableData "
            border size="large"
            show-overflow-tooltip
            highlight-current-row
            tooltip-effect="dark"
            @sort-change="onSortChange"
  >
    <el-table-column prop="id" label="ID" width="150" sortable />
    <el-table-column prop="username" label="用户名" width="200"/>
    <el-table-column prop="nickname" label="昵称" width="200"/>
    <el-table-column prop="gender" label="性别" width="200"/>
    <el-table-column prop="status" label="状态" width="200"/>
    <el-table-column prop="phone" label="电话" width="300"/>
    <el-table-column prop="email" label="邮箱" width="300"/>

  </el-table>
  <el-pagination
      :total="paginationData.total"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      :page-size="[2, 5, 10, 20, 30, 40, 50]"
      :default-page-size="paginationData.pageSize"
      @change="paginationChange"
  />
</template>

<script setup>
import {reactive} from "vue";
import {page} from "../../../apis/user";
import {onMounted} from "vue";
import {ref} from "vue";

const tableData =ref([
])

const paginationData =  reactive({
  total:0,
  currentPage:1,
  pageSize:20
})

const paginationChange=(currentPage,pageSize)=>{
  console.log(currentPage,pageSize)
  paginationData.currentPage=currentPage
  paginationData.pageSize=pageSize
  getPage()
}
//表单搜索条件
const search =reactive({
  username:'',
  phone:'',
  nickname:''
})

//
// const filters =reactive({
//   gender:null,
//
// })


const orders=ref([])
//排序
const onSortChange=({column,order})=>{
// console.log(column,order)
//   orders.value[0]=
//       {
//         column: column.property,
//         isAsc: order == 'ascending'
//       }
  const onSortChange = ({ column, order }) => {
    // 清空现有数组或初始化为空数组，以避免潜在问题
    orders.value = [];

    // 添加新的排序条件到数组中
    orders.value.push({
      column: column.property,
      isAsc: order === 'ascending'
    });
  };


}


//搜索字段内容改变促发事件
const searchChange=()=>{
  getPage()
}

// 调用API加载后端的分页数据
const getPage = ()=>{
  page(paginationData.currentPage,paginationData.pageSize,
      {
        search,
        // orders
        // filters
      }).then((result)=>{
           console.log(result)
          tableData.value=result.data.records
         paginationData.total =result.data.total
      })

}

//生命周期，页面渲染完毕加载
onMounted(()=>{
  getPage()
})
</script>

<style scoped>
.el-table{
  height: calc(100vh - 300px );
}
.el-form{
  display: flex;
}

.el-form-item{
  margin-right: 100px;
  margin-top: 10px;
}

</style>